<template>
  <div class="box">
    <div class="card-a">
      <div class="title">
        <a line-2 :href="`/home/LiveInfoSon/${props.items.consultation_id}`">{{ props.items.consultation_title }}</a>
      </div>
      <!-- <div class="pic-box">
        <img src="/img/cp/pic_a01.jpg" alt="">
        <img src="/img/cp/pic_a02.jpg" alt="">
        <img src="/img/cp/pic_a03.jpg" alt="">
      </div> -->
      <div>
        <span>{{ props.items.username}}</span>
        <span>发布时间：{{moment(props.items.consultation_data).format("YYYY-MM-DD HH:mm:ss")}}</span>
      </div>
    </div>
    <!-- <div class="card-b">
      <div>
        <p class="van-multi-ellipsis--l2 line-2">宋PLUS DM-i领衔！2022年高销量SUV车型盘点</p>
        <div>
          <span>汽车314</span>
          <span>58分钟前</span>
        </div>
      </div>
       <div>
        <img src="/img/cp/pic_a02.jpg" alt="">
      </div> -->
    <!-- </div> -->
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import moment from 'moment'



const props = defineProps({
  items: {
    consultation_title:String,
    consultation_text:String,
    consultation_data:String,
    consultation_id:String,
    username:String,
},
});
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 0 15px;
  >.card-a {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;

    >.title {
      font-size: 18px;
      margin-bottom: 10px;
    }
    >.pic-box {
      display: flex;
      border-radius: 8px;
      justify-content: space-between;
      overflow: hidden;
      margin-bottom: 5px;

      >img {
        width: calc((100% - 6px) / 3);
        object-fit: cover;
      }
    }
    >div:last-child {
      >span {
        color: #9A9899;
        font-size: 12px;
        margin-right: 8px;
      }

    }  
  }
  // >.card-b {
  //   padding: 12px 0;
  //   border-bottom: 1px solid #f0f0f0;
  //   display: flex;
  //   justify-content: space-between;

  //   >div:nth-child(1) {
  //     width: 65%;
  //     >p {
  //       font-size: 18px;
  //       margin-bottom: 12px;
  //     }
  //     >div {
  //       >span {
  //         color: #9A9899;
  //         font-size: 12px;
  //         margin-right: 8px;
  //       }
  //     }
  //   }
  //   >div:last-child {
  //     width: 33%;
  //     >img {
  //       width: 100%;
  //       border-radius: 7px;
  //     }
  //   }
  // }
}

</style>